import React, { FC, useEffect, useState } from "react";
import { Typography } from "antd";
import { getComponentCount } from "../../../utils/api";
import { useRequest } from "ahooks";
import { useParams } from "react-router-dom";
import { getComponentConfByType } from "../../../components/QusetionComponent";
type PropsType = {
  selectedComponentId: string;
  selectedComponentType: string;
  setSelectedComponentId: (id: string) => void;
  setSelectedComponentType: (type: string) => void;
};
const { Title } = Typography;
const StatChart: FC<PropsType> = (props: PropsType) => {
  const {
    selectedComponentId,
    selectedComponentType,
    setSelectedComponentType,
    setSelectedComponentId,
  } = props;
  const [stat, setStat] = useState([]);
  const { id = "" } = useParams();
  const { run } = useRequest(
    async (questionId, componentId) =>
      await getComponentCount(questionId, componentId),
    {
      manual: true,
      onSuccess(res) {
        setStat(res.stat);
      },
    }
  );
  useEffect(() => {
    if (selectedComponentId) run(id, selectedComponentId);
  }, [selectedComponentId, id]);

  const genStat = () => {
    if (!selectedComponentId) return <>未选择组件</>;
    const { StatComponent } =
      getComponentConfByType(selectedComponentType) || {};
    if (StatComponent == null) return <div>该组件无统计图表</div>;
    return <StatComponent stat={stat} />;
  };
  return (
    <div>
      <Title level={3}>图表统计</Title>
      <div>{genStat()}</div>
    </div>
  );
};

export default StatChart;
